<page-header [title]="'高级表单'">
  高级表单常见于一次性输入和提交大批量数据的场景。（示例采用响应式表单，也可使用模板驱动方式）
</page-header>
<form nz-form [formGroup]="form" (ngSubmit)="_submitForm()" [nzLayout]="'vertical'">
  <nz-card [nzBordered]="false" nzTitle="仓库管理">
    <nz-row nzGutter="16">
      <nz-col nzLg="6" nzMd="12" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="name">仓库名</nz-form-label>
          <nz-form-control nzErrorTip="请输入仓库名称">
            <input nz-input formControlName="name" id="name" placeholder="请输入仓库名称" />
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col [nzXl]="{ span: 6, offset: 2 }" [nzLg]="{ span: 8 }" [nzMd]="{ span: 12 }" nzSm="24">
        <nz-form-item>
          <nz-form-label>仓库域名</nz-form-label>
          <nz-form-control nzErrorTip="请输入仓库域名">
            <nz-input-group nzAddOnBefore="http://" nzAddOnAfter=".com">
              <input nz-input formControlName="url" placeholder="请输入" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col [nzXl]="{ span: 8, offset: 2 }" [nzLg]="{ span: 10 }" [nzMd]="{ span: 24 }" nzSm="24">
        <nz-form-item>
          <nz-form-label>仓库管理员</nz-form-label>
          <nz-form-control nzErrorTip="请选择管理员">
            <nz-select formControlName="owner" [nzPlaceHolder]="'请选择管理员'" [nzShowSearch]="true">
              <nz-option *ngFor="let i of users" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
    </nz-row>
    <nz-row nzGutter="16">
      <nz-col nzLg="6" nzMd="12" nzSm="24">
        <nz-form-item>
          <nz-form-label>审批员</nz-form-label>
          <nz-form-control nzErrorTip="请选择审批员">
            <nz-select formControlName="approver" [nzPlaceHolder]="'请选择管理员'" [nzShowSearch]="true">
              <nz-option *ngFor="let i of users" [nzLabel]="i.label" [nzValue]="i.value"> </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col [nzXl]="{ span: 6, offset: 2 }" [nzLg]="{ span: 8 }" [nzMd]="{ span: 12 }" nzSm="24">
        <nz-form-item>
          <nz-form-label>生效日期</nz-form-label>
          <nz-form-control>
            <nz-range-picker formControlName="date_range" [style]="{ width: '100%' }"></nz-range-picker>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col [nzXl]="{ span: 8, offset: 2 }" [nzLg]="{ span: 10 }" [nzMd]="{ span: 24 }" nzSm="24">
        <nz-form-item>
          <nz-form-label>仓库类型</nz-form-label>
          <nz-form-control nzErrorTip="请选择仓库类型">
            <nz-select formControlName="type" [nzShowSearch]="true" [nzPlaceHolder]="'请选择仓库类型'">
              <nz-option [nzLabel]="'私密'" [nzValue]="'private'"></nz-option>
              <nz-option [nzLabel]="'公开'" [nzValue]="'public'"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
    </nz-row>
  </nz-card>
  <nz-card [nzBordered]="false" nzTitle="任务管理">
    <nz-row nzGutter="16">
      <nz-col nzLg="6" nzMd="12" nzSm="24">
        <nz-form-item>
          <nz-form-label>任务名</nz-form-label>
          <nz-form-control nzErrorTip="请输入任务名">
            <input nz-input formControlName="name2" placeholder="请输入任务名" />
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col [nzXl]="{ span: 6, offset: 2 }" [nzLg]="{ span: 8 }" [nzMd]="{ span: 12 }" nzSm="24">
        <nz-form-item>
          <nz-form-label>任务描述</nz-form-label>
          <nz-form-control nzErrorTip="请输入任务描述">
            <textarea nz-input formControlName="summary" [nzAutosize]="true" placeholder="请输入任务描述"></textarea>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col [nzXl]="{ span: 8, offset: 2 }" [nzLg]="{ span: 10 }" [nzMd]="{ span: 24 }" nzSm="24">
        <nz-form-item>
          <nz-form-label>执行人</nz-form-label>
          <nz-form-control nzErrorTip="请选择执行人">
            <nz-select formControlName="owner2" [nzPlaceHolder]="'请选择执行人'" [nzShowSearch]="true">
              <nz-option *ngFor="let i of users" [nzLabel]="i.label" [nzValue]="i.value"> </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
    </nz-row>
    <nz-row nzGutter="16">
      <nz-col nzLg="6" nzMd="12" nzSm="24">
        <nz-form-item>
          <nz-form-label>责任人</nz-form-label>
          <nz-form-control nzErrorTip="请选择责任人">
            <nz-select formControlName="approver2" [nzPlaceHolder]="'请选择责任人'" [nzShowSearch]="true">
              <nz-option *ngFor="let i of users" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col [nzXl]="{ span: 6, offset: 2 }" [nzLg]="{ span: 8 }" [nzMd]="{ span: 12 }" nzSm="24">
        <nz-form-item>
          <nz-form-label>生效时间</nz-form-label>
          <nz-form-control>
            <nz-time-picker formControlName="time"></nz-time-picker>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col [nzXl]="{ span: 8, offset: 2 }" [nzLg]="{ span: 10 }" [nzMd]="{ span: 24 }" nzSm="24">
        <nz-form-item>
          <nz-form-label>任务类型</nz-form-label>
          <nz-form-control nzErrorTip="请选择任务类型">
            <nz-select formControlName="type2" [nzShowSearch]="true" [nzPlaceHolder]="'请选择任务类型'">
              <nz-option [nzLabel]="'私密'" [nzValue]="'private'"></nz-option>
              <nz-option [nzLabel]="'公开'" [nzValue]="'public'"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
    </nz-row>
  </nz-card>
  <nz-card [nzBordered]="false" nzTitle="成员管理">
    <nz-table formArrayName="items" [nzData]="items.value" [nzShowPagination]="false">
      <thead>
        <tr>
          <th>成员姓名</th>
          <th>工号</th>
          <th>所属部门</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of items.controls; let i = index" [formGroupName]="i">
          <td>
            <span *ngIf="editIndex !== i">{{ items.value[i].name }}</span>
            <nz-form-item *ngIf="editIndex === i">
              <nz-form-control nzErrorTip="请输入成员姓名">
                <input nz-input formControlName="name" placeholder="请输入成员姓名" />
              </nz-form-control>
            </nz-form-item>
          </td>
          <td>
            <span *ngIf="editIndex !== i">{{ items.value[i].workId }}</span>
            <nz-form-item *ngIf="editIndex === i">
              <nz-form-control nzErrorTip="请输入工号">
                <input nz-input formControlName="workId" placeholder="请输入工号" />
              </nz-form-control>
            </nz-form-item>
          </td>
          <td>
            <span *ngIf="editIndex !== i">{{ items.value[i].department }}</span>
            <nz-form-item *ngIf="editIndex === i">
              <nz-form-control nzErrorTip="请输入所属部门">
                <input nz-input formControlName="department" placeholder="请输入所属部门" />
              </nz-form-control>
            </nz-form-item>
          </td>
          <td>
            <span *ngIf="editIndex !== i">
              <a (click)="edit(i)">编辑</a>
              <nz-divider nzType="vertical"></nz-divider>
              <a nz-popconfirm nzPopconfirmTitle="是否要删除此行？" (nzOnConfirm)="del(i)">删除</a>
            </span>
            <span *ngIf="editIndex === i">
              <a (click)="save(i)">保存</a>
              <nz-divider nzType="vertical"></nz-divider>
              <a nz-popconfirm nzPopconfirmTitle="是否要取消操作？" (nzOnConfirm)="cancel(i)">取消</a>
            </span>
          </td>
        </tr>
      </tbody>
    </nz-table>
    <button *ngIf="editIndex === -1" nz-button [nzType]="'dashed'" (click)="add()" nzBlock class="mt-md">
      <i nz-icon nzType="plus"></i>
      <span>新增成员</span>
    </button>
  </nz-card>
  <footer-toolbar errorCollect>
    <button nz-button type="primary" nzType="primary">提交</button>
  </footer-toolbar>
</form>
